<template>
  <div class="app-container">
    <el-form ref="From" :model="temp" :rules="rules" label-position="top">

      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="禁用用户名" prop="disabledUsername">
            <el-input v-model.trim="temp.disabledUsername"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="用户名最小长度" prop="usernameMinLength">
            <el-input v-model.trim.number="temp.usernameMinLength"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="用户名最大长度" prop="usernameMaxLength">
            <el-input v-model.trim.number="temp.usernameMaxLength"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="密码最小长度" prop="passwordMinLength">
            <el-input v-model.trim.number="temp.passwordMinLength"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="密码最大长度" prop="passwordMaxLength">
            <el-input v-model.trim.number="temp.passwordMaxLength"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="注册协议" prop="registrationAgreement">
            <el-input v-model.trim="temp.registrationAgreement"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <!--<el-col :span="8">
          <el-form-item label="验证码类型" prop="captchaTypes">
            <el-input v-model.trim="temp.captchaTypes"/>
          </el-form-item>
        </el-col>-->
        <el-col :span="8">
          <el-form-item label="最多连续登陆失败次数" prop="accountLockCount">
            <el-input v-model.trim.number="temp.accountLockCount"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="注册协议" prop="accountLockTime">
            <el-input v-model.trim="temp.accountLockTime"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="图片上传路径" prop="imageUploadPath">
            <el-input v-model.trim="temp.imageUploadPath"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="文件上传路径" prop="fileUploadPath">
            <el-input v-model.trim="temp.fileUploadPath"/>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
  </div>
</template>

<script>
export default {
  name: 'RegisterAndSafety',
  props: {
    systemData: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      temp: {
        disabledUsername: '',
        usernameMinLength: '',
        usernameMaxLength: '',
        passwordMinLength: '',
        passwordMaxLength: '',
        registrationAgreement: '',
        captchaTypes: '',
        accountLockCount: '',
        accountLockTime: '',
        imageUploadPath: '',
        fileUploadPath: ''
      },
      rules: {
        fileUploadPath: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        imageUploadPath: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        accountLockTime: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        accountLockCount: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        disabledUsername: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        usernameMinLength: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        usernameMaxLength: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        passwordMinLength: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        passwordMaxLength: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        captchaTypes: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        registrationAgreement: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    systemData() {
      this.copyTemp()
    }
  },
  created() {
    this.copyTemp()
  },
  methods: {

    // 初始化数据
    copyTemp() {
      for (var key in this.temp) {
        this.temp[key] = this.systemData[key]
      }
    },

    // 表单验证
    verifyData() {
      var v = false
      this.$refs['From'].validate((valid) => {
        v = valid
      })
      return v
    },

    // 验证通过后 调用此方法 返回数据
    returnData() {
      return this.temp
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
